<template>
	<div>
	    <div class="banner">
	        <img src="../../image/com_banner.png" alt="">
			<!-- <router-link class="comloginbtn" to="../login/login.vue"> -->
	        <!-- <a  href="member/login/account.html"> -->
			<div class="comloginbtn" @click="tologin">
	            <img src="../../image/com_banner_login.png" alt="">
			</div>
	       <!-- </a> -->
			<!-- </router-link> -->
	    </div> 
	    <div class="wecando">
	        <div style="font-size:45px;text-align:center;margin-top:60px;margin-bottom:60px;">我们的服务</div>
	        <ul class="pcub pcub-pac">
	            <li class="item-box mr20">
	                <div class="item-img"></div>
	                <div class="item-text">
	                    <div class="text-container">单独构建，即时存储资源，批量配置资源。</div>
	                </div>
	                <div class="item-title">私有云库</div>
	            </li>
	            <li class="item-box mr20">
	                <div class="item-img"></div>
	                <div class="item-text">
	                    <div class="text-container">利用优势资源，快速实现订单落地，保持高利润</div>
	                </div>
	                <div class="item-title">智能订单管理</div>
	            </li>
	            <li class="item-box mr20">
	                <div class="item-img"></div>
	                <div class="item-text">
	                    <div class="text-container">快速配置优势资源，实现资源有效分发，加强客户成交率。</div>
	                </div>
	                <div class="item-title">云资源库</div>
	            </li>
	            <li class="item-box mr20">
	                <div class="item-img"></div>
	                <div class="item-text">
	                    <div class="text-container">一键部署OEM，共享云资源库，有效展开业务，提高变现能力。</div>
	                </div>
	                
	                <div class="item-title">OEM</div>
	            </li>
	        </ul>
	    </div>
	    <div class="icp-box">
	        <div class="icp">蜀ICP备13026644号-6</div>
	    </div>
	</div>
  
  
  
</template>

<script>
export default {
  name: 'main',
  props: {
    msg: String
  },
  methods:{
	  tologin(){
		  this.$router.push('/login')
	  }
  }
}
</script>

<style scoped>
	@import url("../../static/css/reset.css");
	
h3 {
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
 .banner{
            width:100%;
            position:relative;
        }
        .banner img {
            width:100%;
        }
        .banner .comloginbtn {
            width:16%;
            position: absolute;
            right:1%;
            top: 5%;
            color:#fff;
        }
        .wecando {

        }
        .wecando ul{
            width:1200px;
            margin-left:auto;
            margin-right:auto;
        }
        .wecando ul .item-box{
            width:24%;
            height:450px;
            position: relative;
        }
        .wecando ul .item-box .item-title{
            position: absolute;
            top: 60%;
            color: #fff;
            font-size:20px;
            text-align:center;
            width:100%;
        }
        .wecando ul .item-box .item-text .text-container{
            padding-top:180px;
            padding-left: 10%;
            padding-right: 10%;
            font-size:22px;
            color:#fff;
        }
        .wecando ul .item-box .item-text{
            position: absolute;
            top: 0;
            width:100%;
            height:100%;
            background: #212659;
            display:none;
        }
        .wecando ul .item-box:hover .item-img {
            display: none;
        }
        .wecando ul .item-box:hover .item-title {
            display: none;
        }
        .wecando ul .item-box:hover .item-text {
            display: block;
        }
        .wecando ul .item-box:nth-child(1) .item-img {
            width:100%;
            height:100%;
            background:url('../../image/com_do1.png') no-repeat center center;
        }
        .wecando ul .item-box:nth-child(2) .item-img {
            width:100%;
            height:100%;
            background:url('../../image/com_do2.png') no-repeat center center;
        }
        .wecando ul .item-box:nth-child(3) .item-img {
            width:100%;
            height:100%;
            background:url('../../image/com_do3.png') no-repeat center center;
        }
        .wecando ul .item-box:nth-child(4) .item-img {
            width:100%;
            height:100%;
            background:url('../../image/com_do4.png') no-repeat center center;
        }
        .icp-box {
            width: 100%;
            background: #3c3f46;
            text-align: center;
            height: 120px;
            line-height: 120px;
            margin-top:20px;
        }
        .icp-box .icp{
            color: #fff;
        }
</style>
